<template>
	<view class="environmentdetail">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="container">
			<view class="content-wrap">
				<view class="title-name">{{detail.title}}</view>
				<view class="title-detail">
					<view class="left">
						<image :src="detail.avatar" mode=""></image>
						<view class="department">
							<view class="name">{{detail.publisher}}</view>
							<view class="date">
								<view class="issue">发布</view><text>{{detail.publishdate}}</text>
							</view>
						</view>
					</view>
					<view class="right">阅读量：{{detail.viewnum}}</view>
				</view>
				<view class="content-msg" v-html="detail.content">

				</view>
				<image v-if="detail.headimglarge" @click="searchImg(detail.headimglarge)" class="img"
					:src="detail.headimglarge"></image>

			</view>
			<view class="file-wrap" v-if="fielNameList[0]">
				<h3>附件</h3>
				<view class="file-item" @click="downFile(index)" v-for="(item,index) in fielNameList" :key="index">
					<image :src="resourceUrl+'pdf.png'" mode=""></image>
					<view class="file-msg">
						<view class="name">{{item}}</view>
						<view class="size">{{fielSizeList[index]}}</view>
					</view>
				</view>

			</view>
		</view>

	</view>

</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'

	let detail = ref({})
	let fielNameList = ref([])
	let fielUrlList = ref([])
	let fielSizeList = ref([])
	let name = "环保资讯"
	let seltop = ref(1)
	let searchImg = (url) => {
		uni.previewImage({
			urls: [url],
			current: 0
		})

	}
	let downFile = (index) => {
		let url = fielUrlList.value[index]

		uni.downloadFile({ //只能是GET请求
			url, //请求地址(后台返回的码流地址)
			success: (res) => {
				console.log(res, '请求');
				//下载成功
				if (res.statusCode === 200) {
					//保存文件
					let tempFile = res.tempFilePath;

					uni.openDocument({
						filePath: tempFile,
						showMenu: true, //是否可以分享
						success: (res) => {

						},
						fail: (e) => {
							uni.showToast({
								title: '打开失败',
								icon: "error",
								duration: 2000
							})
						}
					})
				}
			},
			fail: (e) => {

				uni.showToast({
					title: '文件加载失败',
					icon: "error",
				})
			}
		});


	}
	onLoad((e) => {
		// detail.value = {
		// 	title: "光大水务预中标河南郑州市政 污水处理中心一期工程！",
		// 	publishdate: "2024-03-05",
		// 	viewnum: "3035",
		// 	headimglarge: "https://www.sgang.xyz/login-bgc.png",
		// 	avatar: "https://www.sgang.xyz/lvqitong/login-huanbao-bgc.png",
		// 	publisher: "郑州市生态环境保护局",
		// }
		http({
			url: '/article/detail',
			data: {
				id: e.id
			}
		}).then((res) => {
			if (res.code == 0) {
				detail.value = res.data
				fielNameList.value = res.data.attachname.split(';')

				fielUrlList.value = res.data.attachurl.split(';')
				fielSizeList.value = res.data.attachsize.split(';')
			}

		})
	})
</script>

<style lang="scss" scoped>
	.environmentdetail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;


		.title-bgc {
			background: #0874FA;
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
		}

		.container {
			height: calc(100vh - 160upx);
			background: #F3F5F7;
			overflow-y: scroll;

			.file-wrap {
				margin-top: 16rpx;

				width: 750rpx;
				height: 205rpx;
				background: #FFFFFF;
				padding-top: 35upx;
				padding-left: 30upx;
				padding-bottom: 42upx;

				.name {

					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 33rpx;
					color: #000000;
					line-height: 33rpx;
				}

				.null {
					margin-top: 41rpx;
					font-weight: bold;
					font-size: 29rpx;
					color: #000000;
				}

				.file-item {
					display: flex;
					align-items: center;
					height: 92upx;
					margin-top: 41upx;
					padding-bottom: 40upx;

					image {
						width: 82upx;
						height: 92upx;
					}

					.file-msg {
						display: flex;
						flex-direction: column;
						margin-left: 30upx;
						justify-content: space-around;
						height: 92upx;

						.name {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 32rpx;
							color: #292B2C;

						}

						.size {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 22rpx;
							color: #A5A9A7;

						}
					}
				}





			}

			.content-wrap {
				padding: 48rpx 50rpx 25upx 30rpx;


				background-color: #fff;

				.title-name {
					font-weight: bold;
					font-size: 35rpx;
					color: #070707;
					margin-bottom: 45rpx;
				}



				.content-msg {
					margin-top: 36rpx;
					margin-bottom: 41rpx;
					line-height: 50rpx;
					font-weight: 400;
					font-size: 29rpx;
					color: #333333;

				}

				.img {}

				.title-detail {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;


						image {
							width: 54rpx;
							height: 54rpx;
							margin-right: 10rpx;
							border-radius: 50%;
							flex-shrink: 0;
						}

						.department {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.name {
								flex-grow: 1;
								font-weight: 500;
								font-size: 21rpx;
								color: #070707;

							}

							.date {

								font-weight: 400;
								font-size: 17rpx;
								color: #999999;
								display: flex;
								align-items: center;

								.issue {
									width: 42rpx;
									height: 20rpx;
									background: #EEF2FF;
									border-radius: 6rpx;

									font-weight: 400;
									font-size: 13rpx;
									color: #0874FA;
									text-align: center;
									line-height: 20rpx;

									text {

										font-weight: 400;
										font-size: 17rpx;
										color: #999999;

									}
								}
							}
						}
					}

					.right {

						font-weight: 400;
						font-size: 21rpx;
						color: #9494A3;
						flex-shrink: 0;
					}
				}
			}
		}

	}
</style>